<!--根据这个页单独设置样式-->
<style>
    .table-responsive {overflow-x: inherit}
    td {vertical-align: middle !important;}
    .node-list li{display: inline-block}
    .buttonbor{display: block;border-bottom: 10px solid #fff;}
    .red{
        color: red;
    }
    .sevBtn{
        background-color: green;
    }

</style>
<div>
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h3">分类管理</h1>
    </div>
    <div class="padder-md m-b-none m-t" style="padding-top: 0">
        <div class="panel panel-default">
            <div class="panel-heading">分类列表</div>
            <div class="table-responsive" style="padding: 20px;" >
                <table class="table table-striped b-t b-light" >
                    <div class="col-sm-3" style="border:1px solid #ccc">
                        <nav ui-nav class="navi clearfix" >
                            <div style="padding-top: 10px;">
                                <button class="btn btn-sm btn-info" ng-click="ctrl.vm.addCataa(1)">添加一级分类</button>
                            </div>
                            <h5 style="padding-left: 10px">全部分类</h5>
                            <ul class="nav">
                                <li ng-repeat="item in ctrl.vm.data" ng-class="{true:'red',false:''}[{{item.status==0?true:false}}]">
                                    <a href class="auto" ng-click="ctrl.vm.test1(item)">
                                    <span class="pull-right text-muted" ng-if="item.children.length>0" >
                                        <i class="fa fa-fw fa-angle-right text"></i>
                                        <i class="fa fa-fw fa-angle-down text-active"></i>
                                    </span>
                                    <i class="icon-folder icon text-info"></i>
                                    <span class="font-bold">{{item.name}} <i ng-class="{true:'red',false:''}[{{item.status==0?true:false}}]" class="text-muted">({{item.id}})</i></span>
                                    </a>
                                    <ul class="nav nav-sub dk" >
                                        <li class="active" ng-repeat="list in item.children" ng-class="{true:'red',false:''}[{{list.status==0?true:false}}]">
                                            <a class="auto" ng-click="ctrl.vm.test2(list)">
                                              <span class="pull-right text-muted" ng-if="list.children.length>0">
                                                <i class="fa fa-fw fa-angle-right text"></i>
                                                <i class="fa fa-fw fa-angle-down text-active"></i>
                                              </span>
                                                <i class=" fa-folder-open-o fa text-info"></i>
                                                <span class="font-bold" >
                                                    {{list.name}}
                                                    <i ng-class="{true:'red',false:''}[{{list.status==0?true:false}}]" class="text-muted">({{list.id}})</i>
                                                </span>
                                            </a>
                                            <ul class="nav nav-sub dk">
                                                <li ui-sref-active="active" ng-repeat="test in list.children" ng-class="{true:'red',false:''}[{{test.status==0?true:false}}]">
                                                    <a ng-click="ctrl.vm.testtt(test)">
                                                        <i class="icon-doc icon text-info"></i>
                                                        <span>{{test.name}}<i ng-class="{true:'red',false:''}[{{test.status==0?true:false}}]" class="text-muted">({{test.id}})</i></span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-sm-8" style="border:1px solid #ccc;margin-left: 10px;">
                        <h3 ng-if="ctrl.vm.bianJi!=1&&ctrl.vm.addCatalog==0" style="border-bottom: 1px solid #ccc;padding-bottom: 10px;">信息</h3>
                        <h3 ng-if="ctrl.vm.daP.id&&ctrl.vm.bianJi==1&&ctrl.vm.addCatalog==0" style="border-bottom: 1px solid #ccc;padding-bottom: 10px;">编辑</h3>
                        <h3 ng-if="ctrl.vm.addCatalog==1" style="border-bottom: 1px solid #ccc;padding-bottom: 10px;">添加</h3>

                        <div ng-if="ctrl.vm.daP.id&&ctrl.vm.bianJi==0&&ctrl.vm.addCatalog==0">
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right">分类id：</div>
                                <div class="col-sm-3">{{ctrl.vm.daP.id}}</div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" >分类名：</div>
                                <div class="col-sm-3">{{ctrl.vm.daP.name}}</div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" >状态：</div>
                                <div class="col-sm-3">
                                    <span class="label  bg-success" ng-if="ctrl.vm.daP.status==1">启用</span>
                                    <span class="label  bg-danger" ng-if="ctrl.vm.daP.status==0">禁用</span>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" >级别：</div>
                                <div class="col-sm-3">
                                    <span ng-if="ctrl.vm.daP.level==1">一级分类</span><span ng-if="ctrl.vm.daP.level==2">二级分类</span><span ng-if="ctrl.vm.daP.level==3">三级分类</span>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" >排序：</div>
                                <div class="col-sm-3">{{ctrl.vm.daP.sort}}</div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right">热门：</div>
                                <div class="col-sm-3">
                                    <span class="label  bg-success" ng-if="ctrl.vm.daP.is_hot==1">是</span><span class="label  bg-danger" ng-if="ctrl.vm.daP.is_hot==0">不是</span>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" >图片：</div>
                                <div class="col-sm-3">
                                    <img class="content-add-image" style="width: 50%" ng-src="{{ctrl.vm.daP.image|imgwhq:200:400:90}}" err-src="300:300:90" alt="">
                                    <span ng-if="!ctrl.vm.daP.image">暂无</span>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" >icon：</div>
                                <div class="col-sm-3">
                                    <img class="content-add-image" style="width: 50%" ng-src="{{ctrl.vm.daP.icon|imgwhq:200:400:90}}" err-src="300:300:90" alt="">
                                    <span ng-if="!ctrl.vm.daP.icon">暂无</span>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="width: 160px"></div>
                                <div class="col-sm-3">
                                    <div class="col-sm-2" style="width: 1px" ng-if="ctrl.vm.panDuan ==0"></div>
                                    <button class="btn btn-sm btn-info" ng-click="ctrl.vm.addTwo(ctrl.vm.daP.id,ctrl.vm.daP.level)" ng-if="ctrl.vm.panDuan !=0">添加子分类</button>
                                    <button class="btn btn-sm btn-primary" style="margin:0 4px " ng-click="ctrl.vm.bianJiFun(ctrl.vm.daP.level)">编辑</button>
                                    <button class="btn btn-sm btn-danger" ng-click="ctrl.vm.delThis(ctrl.vm.daP.id)">删除</button>
                                </div>
                            </div>
                        </div>
                        <div ng-if="ctrl.vm.daP.id&&ctrl.vm.bianJi==1&&ctrl.vm.addCatalog==0">
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">分类id：</div>
                                <div class="col-sm-3"><input class="form-control" ng-model="ctrl.vm.daP.id" type="text" ng-disabled="true"></div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">上级分类id：</div>
                                <div class="col-sm-3"><input class="form-control" ng-model="ctrl.vm.daP.parent " type="text"></div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">分类名：</div>
                                <div class="col-sm-3"><input class="form-control" ng-model="ctrl.vm.daP.name" type="text"></div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">状态：</div>
                                <div class="col-sm-3">
                                    <select class="form-control" ng-model="ctrl.vm.daP.status">
                                        <option value="0">禁用</option>
                                        <option value="1">启用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">分类：</div>
                                <div class="col-sm-3">
                                    <input class="form-control" value="{{ctrl.vm.addData.level}}级分类" type="text" disabled>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">排序：</div>
                                <div class="col-sm-3"><input class="form-control" ng-model="ctrl.vm.daP.sort" type="text"></div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">热门：</div>
                                <div class="col-sm-3">
                                    <select class="form-control" ng-model="ctrl.vm.daP.is_hot">
                                        <option value="0">不是</option>
                                        <option value="1">是</option>
                                    </select>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">图片：</div>
                                <div class="col-sm-3">
                                    <div class="col-sm-12" style="padding-left: 0">
                                        <img style="width: 60%" class="content-add-image" ng-src="{{ctrl.vm.daP.image|imgwhq}}" err-src="300:300:90" alt="">
                                    </div>
                                    <div class="col-sm-4" style="padding-top: 10px;padding-left: 0"">
                                        <input type="file" name="certificate" nv-file-select uploader="uploader"
                                               ng-click="clearItems(1)" style="position: absolute;height:50px;opacity: 0;"/>
                                        <button class="btn btn-sm btn-default">选择图片</button>
                                    </div>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">icon：</div>
                                <div class="col-sm-3">
                                    <div class="col-sm-12" style="padding-left: 0">
                                            <img style="width: 60%" class="content-add-image" ng-src="{{ctrl.vm.daP.icon|imgwhq}}" err-src="300:300:90" alt="">
                                    </div>
                                    <div class="col-sm-4" style="padding-top: 10px;padding-left: 0"">
                                         <input type="file" name="certificate" nv-file-select uploader="uploaders"
                                                ng-click="clearItems(2)" style="position: absolute;height:50px;opacity: 0;"/>
                                         <button class="btn btn-sm btn-default">选择icon</button>
                                    </div>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2" style="width: 90px"></div>
                                <div class="col-sm-3 text-left" style="padding-left: 116px"><button ng-click="ctrl.vm.saveChange()" class="btn btn-success " >保存</button></div>
                            </div>
                        </div>
                        <div ng-if="ctrl.vm.addCatalog==1">
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">分类名：</div>
                                <div class="col-sm-3"><input class="form-control" ng-model="ctrl.vm.addData.name" type="text"></div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">状态：</div>
                                <div class="col-sm-3">
                                    <select class="form-control" ng-model="ctrl.vm.addData.status">
                                        <option value="">请选择状态</option>
                                        <option value="0">禁用</option>
                                        <option value="1">启用</option>
                                    </select>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">分类：</div>
                                <div class="col-sm-3">
                                    <input class="form-control" value="{{ctrl.vm.addData.level}}级分类" type="text" disabled>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">排序：</div>
                                <div class="col-sm-3"><input class="form-control" ng-model="ctrl.vm.addData.sort" type="text"></div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">热门：</div>
                                <div class="col-sm-3">
                                    <select class="form-control" ng-model="ctrl.vm.addData.is_hot">
                                        <option value="">请选择是否是热门</option>
                                        <option value="0">不是</option>
                                        <option value="1">是</option>
                                    </select>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">图片：</div>
                                <div class="col-sm-3">
                                    <div class="col-sm-12" style="padding-left: 0">
                                        <img style="width: 60%" class="content-add-image" ng-src="{{ctrl.vm.addData.image|imgwhq}}" err-src="300:300:90" alt="">
                                    </div>
                                    <div class="col-sm-4" style="padding-top: 10px;padding-left: 0"">
                                        <input type="file" name="certificate" nv-file-select uploader="uploader"
                                               ng-click="clearItems(3)" style="position: absolute;height:50px;opacity: 0;"/>
                                        <button class="btn btn-sm btn-default">选择图片</button>
                                    </div>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2 text-right" style="padding-top: 5px;">icon：</div>
                                <div class="col-sm-3">
                                    <div class="col-sm-12" style="padding-left: 0">
                                        <img style="width: 60%" class="content-add-image" ng-src="{{ctrl.vm.addData.icon|imgwhq}}" err-src="300:300:90" alt="">
                                    </div>
                                    <div class="col-sm-4" style="padding-top: 10px;padding-left: 0">
                                        <input type="file" name="certificate" nv-file-select uploader="uploaders"
                                               ng-click="clearItems(4)" style="position: absolute;height:50px;opacity: 0;"/>
                                        <button class="btn btn-sm btn-default">选择icon</button>
                                    </div>
                                </div>
                            </div>
                            <div class="container " style="padding-bottom: 10px;">
                                <div class="col-sm-2" style="width: 90px"></div>
                                <div class="col-sm-3 text-right"><button ng-click="ctrl.vm.saveAddChange()" class="btn btn-success">保存</button></div>
                            </div>
                        </div>

                        <div ng-if="!ctrl.vm.daP.id&&ctrl.vm.addCatalog==0" style="text-align: center;line-height: 50px;height:50px;color:#ccc;font-size: 20px;padding-bottom: 100px;">请选择属性进行查看信息</div>
                    </div>
                   <!-- <div class="col-sm-12">
                        <div class="wrapper-md">
                            <div class="b-a bg-light dk r r-2x">
                                <ul class="nav nav-list nav-pills nav-stacked abn-tree ng-isolate-scope">

                                </ul>
                            </div>
                        </div>
                    </div>-->
                </table>
            </div>
        </div>
    </div>
</div>